<template>
	<view class="w-670">

		<!-- ———————— 导航栏—————————— -->
		<scroll-view class="nav-title nav  title" scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
			<view class="titleBig">
				<view class="titleSmall fs-32  t-w t-item no-border tb"
					:class="[curIndex==index ? text:'',curIndex==index ? '':'tb']" v-for="(i,index) in menu" :key="i"
					@tap="change(index,i) ">
					{{i}}
				</view>
			</view>
		</scroll-view>
		<!-- ———————— 导航栏—————————— -->

		<!-- 滑块移动的方法 -->
		<swiper @change="changeTab" :current="curIndex" class="mian" style="height: calc(100vh - 70rpx);">

			<swiper-item>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>
						<scroll-view class=" nav  title" scroll-x="true" scroll-with-animation
							:scroll-left="scrollLeft">
							<view class=" fs-32   ml-0 ">
								<view class="content-title">
									<view class="loansName fs-24">{{s.name}} </view>
									<view class=" w-190 fs-24" v-for="(item,index) in sub" :key="item">{{item}}
									</view>
								</view>
								<navigator :url="'../t-fundDetail/t-fundDetail?code='+ i.code" v-for=" i in ftd"
									:key="i.code">
									<view class="content-title content-detail  ">
										<view class="loansName nameDouble">
											<view class="line">{{i.name}}</view>
											<view class="line-2">{{i.code}}</view>
										</view>
										<view class="  fs-24 bo  text-df">{{i.netWorth}} </view>
										<view class="  fs-24 bo  "
											:class="[i.lastWeekGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastWeekGrowth}}%
										</view>
										<view class="  fs-24 bo  text-red"
											:class="[i.lastMonthGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastMonthGrowth}}%
										</view>
										<view class="  fs-24 bo  text-red"
											:class="[i.lastThreeMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastThreeMonthsGrowth}}%
										</view>
										<view class="  fs-24 bo  text-red"
											:class="[i.lastSixMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastSixMonthsGrowth}}%
										</view>
										<view class="  fs-24 bo  text-red"
											:class="[i.lastYearGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastYearGrowth}}%
										</view>
									</view>
								</navigator>
							</view>
							<view class="mt-50">
							</view>
						</scroll-view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item @touchmove.stop=''>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>
						<scroll-view class=" nav  title" scroll-x="true" scroll-with-animation
							:scroll-left="scrollLeft">
							<view class=" fs-32   ml-0 ">
								<view class="content-title">
									<view class="loansName fs-24">{{s.name}} </view>
									<view class="  fs-24" v-for="(item,index) in sub" :key="item">{{item}} </view>
								</view>
								<navigator :url="'../t-fundDetail/t-fundDetail?code='+ i.code" v-for=" i in ftd"
									:key="i.code">
									<view class="content-title content-detail">
										<view class="loansName nameDouble">
											<view class="line">{{i.name}}</view>
											<view class="line-2">{{i.code}}</view>
										</view>
										<view class=" bo fs-24  text-df">{{i.netWorth}} </view>
										<view class=" bo fs-24  "
											:class="[i.lastWeekGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastWeekGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastMonthGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastMonthGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastThreeMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastThreeMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastSixMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastSixMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastYearGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastYearGrowth}}%
										</view>
									</view>
								</navigator>
							</view>
							<view class="mt-50">
							</view>
						</scroll-view>
					</view>

				</scroll-view>
			</swiper-item>

			<swiper-item @touchmove.stop=''>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>

						<scroll-view class=" nav  title" scroll-x="true" scroll-with-animation
							:scroll-left="scrollLeft">
							<view class=" fs-32   ml-0 ">
								<view class="content-title">
									<view class="loansName fs-24">{{s.name}} </view>
									<view class=" bo fs-24" v-for="(item,index) in sub" :key="item">{{item}} </view>
								</view>
								<navigator :url="'../t-fundDetail/t-fundDetail?code='+ i.code" v-for=" i in ftd"
									:key="i.code">
									<view class="content-title content-detail">
										<view class="loansName nameDouble">
											<view class="line">{{i.name}}</view>
											<view class="line-2">{{i.code}}</view>
										</view>
										<view class=" bo fs-24  text-df">{{i.netWorth}} </view>
										<view class=" bo fs-24  "
											:class="[i.lastWeekGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastWeekGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastMonthGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastMonthGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastThreeMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastThreeMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastSixMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastSixMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastYearGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastYearGrowth}}%
										</view>
									</view>
								</navigator>
							</view>
							<view class="mt-50">
							</view>
						</scroll-view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item @touchmove.stop=''>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>
						<scroll-view class=" nav  title" scroll-x="true" scroll-with-animation
							:scroll-left="scrollLeft">
							<view class=" fs-32   ml-0 ">
								<view class="content-title">
									<view class="loansName fs-24">{{s.name}} </view>
									<view class=" bo fs-24" v-for="(item,index) in sub" :key="item">{{item}} </view>
								</view>
								<navigator :url="'../t-fundDetail/t-fundDetail?code='+ i.code" v-for=" i in ftd"
									:key="i.code">
									<view class="content-title content-detail">
										<view class="loansName nameDouble">
											<view class="line">{{i.name}}</view>
											<view class="line-2">{{i.code}}</view>
										</view>
										<view class=" bo fs-24  text-df">{{i.netWorth}} </view>
										<view class=" bo fs-24  "
											:class="[i.lastWeekGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastWeekGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastMonthGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastMonthGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastThreeMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastThreeMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastSixMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastSixMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastYearGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastYearGrowth}}%
										</view>
									</view>
								</navigator>
							</view>
							<view class="mt-50">
							</view>
						</scroll-view>
					</view>
				</scroll-view>
			</swiper-item>

			<swiper-item @touchmove.stop=''>
				<scroll-view scroll-y="true" style="height: 100%;">
					<view>
						<scroll-view class=" nav  title" scroll-x="true" scroll-with-animation
							:scroll-left="scrollLeft">
							<view class=" fs-32   ml-0 ">
								<view class="content-title">
									<view class="loansName fs-24">{{s.name}} </view>
									<view class=" bo fs-24" v-for="(item,index) in sub" :key="item">{{item}} </view>
								</view>
								<navigator :url="'../t-fundDetail/t-fundDetail?code='+ i.code" v-for=" i in ftd"
									:key="i.code">
									<view class="content-title content-detail">
										<view class="loansName nameDouble">
											<view class="line">{{i.name}}</view>
											<view class="line-2">{{i.code}}</view>
										</view>
										<view class=" bo fs-24  text-df">{{i.netWorth}} </view>
										<view class=" bo fs-24  "
											:class="[i.lastWeekGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastWeekGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastMonthGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastMonthGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastThreeMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastThreeMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastSixMonthsGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastSixMonthsGrowth}}%
										</view>
										<view class=" bo fs-24  text-red"
											:class="[i.lastYearGrowth<0?'text-green':'text-red cuIcon-add']">
											{{i.lastYearGrowth}}%
										</view>
									</view>
								</navigator>
							</view>
							<view class="mt-50">
							</view>
						</scroll-view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- 滑块移动的方法 -->
		<!-- 提示 -->
		<view class="text-center text-gray fs-24" v-if="ftd.length==0">我也是有底线的</view>



	</view>
</template>

<script>
	import {
		createNamespacedHelpers
	} from 'vuex';
	const {
		mapActions,
		mapState,


	} = createNamespacedHelpers('product')
	export default {
		data() {
			return {
				menu: ['全部', "股票型", "债券型", "混合型", "指数型"],
				curIndex: 0,
				TabCur: 0,
				scrollLeft: 0,
				text: ' round activeBlue',
				sub: ["单位净值", "一周收益", "一月收益", "三月收益", "六月收益", "一年收益"],
				s: {
					name: "基金名称"
				},
				type: '全部', //暂时没有用
				pageNum: 1 //暂时没有用

			};


		},
		computed: {
			...mapState(['ftd'])
		},
		methods: {
			...mapActions(['getFundTop']),
			// ...mapMutations(['clearFtd']),

			// 切换数据进行渲染
			change(index, i) {
				this.curIndex = index;
				this.type = i //暂时没有用
				this.getFundTop([this.type, this.pageNum])
			},

			changeTab(e) {
				this.curIndex = e.detail.current
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
			},
			// onPulling() {
			// 	this.pageNum++
			// 	this.getFundTop([this.type, this.pageNum])
			// },
			demo() {
				uni.request({
					url: 'http://182.92.101.230:8080/product/fund/all',
					data: {
						pageNum: 3
					},
					success(res) {
						console.log(res.data, '页码')
					}

				})
			}


		},

		onLoad() {

			this.getFundTop([this.type, this.pageNum]) //进入就要展示数据先执行一次 
			// this.demo()

		},

		// 触底函数 上面和下面的this.pageNum没有用
		onReachBottom() {
			this.pageNum++
			this.getFundTop([this.type, this.pageNum])
		},









	}
</script>

<style scoped lang="scss">
	.w-670 {
		width: 670rpx;
		margin: 0 auto;
	}


	.bo {
		// border:1px solid red;
		width: 130rpx;
		flex-shrink: 0;
	}

	.scroll {
		flex: 1;
		overflow: scroll;
	}

	.w-30 {
		width: 30%;
	}

	.w-130 {
		width: 130rpx;
		padding-right: 10rpx;

		// border: 1px solid red;
	}

	.fs-32 {
		font-size: 32rpx;
	}

	.fs {
		font-size: 28rpx;
	}

	.fs-24 {
		font-size: 24rpx;
	}

	.ml-70 {
		margin-left: 70rpx;
	}

	.t-b {
		color: black;

	}

	.f-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 10rpx;
		text-align: left;
	}

	.t-body {
		display: flex;
		flex-direction: column;
		// flex: 1;

		text {
			flex-shrink: 1;
		}
	}

	.w-200 {
		width: 200rpx;
		// border:1px solid red
	}

	.w-160 {
		width: 120rpx;
		text-align: left;
		// border: 1px solid red;
		padding: 0;
	}

	.lh-95 {
		line-height: 95rpx;

	}

	.p-20 {
		padding: 20rpx 0;
	}

	// .w-136{
	// 	width: 180rpx;
	// }
	.ml-0 {
		margin: 0;
		padding: 0;
	}

	// .{
	// 	height: auto;
	// 	line-height: auto;
	// }


	.h-100 {
		height: 100rpx;
		line-height: 100rpx;
	}

	.h-30 {
		height: 30rpx;
		line-height: 30rpx;
	}

	.h-40 {
		height: 40rpx;
		line-height: 40rpx;
	}

	.border {

		border-top: 1px solid #BBBBBB;
		border-bottom: 1px solid #BBBBBB;
	}

	.b-right {
		border-right: 1px solid #BBBBBB;
	}

	.mt-50 {
		height: 200rpx;
		// margin-top: 50rpx;
	}


	.title {
		.t-item {

			// border: 0;
			&:nth-child(1) {
				margin-left: 0;
			}

		}

		.tb {
			color: #BBBBBB;
		}
	}

	.nav-title {
		.titleBig {
			display: flex;
			height: 140rpx;
			text-align: center;
			justify-content: space-around;
			align-items: center;

			.activeBlue {
				height: 44rpx;
				padding: 0 20rpx;
				text-align: center;
				line-height: 44rpx;
				font-size: 24rpx;
				font-weight: 300;
				color: white;
				background-color: #0081ff;
			}

			.titleSmall {
				// width: 30%;
			}
		}
	}

	.mian {
		margin-top: 24rpx;

		.content-title {
			height: 68rpx;
			line-height: 68rpx;
			display: flex;
			text-align: center;
			font-size: 24px;
			font-weight: 400;
			color: #474747;


			&>view {
				border-bottom: 1px solid #BBBBBB;
				padding: 0 24rpx;
			}

			.loansName {
				width: 190rpx;
				border-right: 1px solid #BBBBBB;
				flex-shrink: 0;
			}

			.nameDouble {
				display: flex;
				flex-direction: column;
				justify-content: center;
				text-align: left;

				.line {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 28rpx;
					color: #474747;
					max-width: 140rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.line-2 {
					font-size: 24rpx;
					font-weight: 400;
					line-height: 24rpx;
					color: #474747;
				}
			}
		}

		.content-detail {
			height: 106rpx;
			line-height: 106rpx;
		}
	}
</style>
